<template>
    <div>
        <banner :sightName='sightName' 
                :bannerImg='bannerImg' 
                :gallaryImgs='gallaryImgs'>
        </banner>
        <detailheader></detailheader>
        <div class="content">
         <detaillist :list='categoryList'></detaillist>
        </div>
    </div>
</template>

<script>
import banner from './components/detailbannner'
import detailheader from './components/detailheader'
import detaillist from './components/detaillist'
import axios from 'axios'
export default {
  name: 'Detail',
  components:{
    banner,
    detailheader,
    detaillist
  },
  data() {
    return {
      sightName:"",
      bannerImg:"",
      gallaryImgs:[],
      categoryList:[]
    }
  },
  methods: {
    getDetailInfo(){
      axios.get('api/detail.json',{
        params:{
          id:this.$route.id
          }
      }).then(this.getDetailSucss)
    },
    getDetailSucss(msg){
      msg=msg.data
      if (msg.ret&&msg.data) {
        const data = msg.data
        this.sightName=data.sightName
        this.bannerImg=data.bannerImg
        this. gallaryImgs=data. gallaryImgs
        this.categoryList=data.categoryList
      }
    }
  },
  mounted(){
    this.getDetailInfo()
  }
}
</script>

<style scoped>
  .content{
    height: 50rem;;
  }
</style>